<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no,email=no,address=no" />
    <meta name="renderer" content="webkit" />
    <meta name="description" itemprop="description" content=""/>
    <meta itemprop="name" content="1"/>
    <meta name="keywords" content=""/>
    <title>盛世传媒</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/ditu.css">
</head>
<body>
<div class="header">
    <div class="logo left"><image class="logoimg"  src="../images/logo.png" alt="logo" title="盛世传媒"></image>
    </div>
    <div class="daohang right">
        <ul>
            <li><a href="../index.html">首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li class="active"><a href="ditu.html">位置地图</a></li>
            <li><a href="news.html">新闻资讯</a></li>
            <li><a href="chanpin.html">产品介绍</a></li>
            <!--<li><a href="tel.html">联系我们</a></li>-->
            <li><a href="activity.html">公益活动</a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="banner"><img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/dituBanner.jpg" alt="案例欣赏" title="案例欣赏"></div>
    <h3>大屏地图</h3>
    <!-- 地图 -->
    <div class="map"><div id="container"></div></div>
</div>
<!-- 底部 -->
<div class="foot">
    <ul class="flex">
        <li class="flex"><image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/didianIcon.png"></image>
            <p>河南省南阳市镇平县体育中心主席楼</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/phoneIcon.png"></image>
            <p>联系电话 : 0377-65566888</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/timeIcon.png"></image>
            <p>工作时间 : 09:00--18:00</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/youjianIcon.png"></image>
            <p>contact@fkadjkhsf.co</p>
        </li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript" src="../js/ditu.js"></script>
<script type="text/javascript">
    //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [112.228635,33.035973],
        zoom: 15
    });
    addMarker();
    //添加marker标记
    function addMarker() {
        map.clearMap();
        //健康路与中山街交叉口
        var marker1 = new AMap.Marker({
            map:map,
            position: [112.228635,33.035973],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //卫生路与涅阳路交叉口
        var marker2 = new AMap.Marker({
            map:map,
            position: [112.235944,33.029969],
            icon:new AMap.Icon({
                size:new AMap.Size(30,30),
                image:"../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //电力广场路口
        var marker3 = new AMap.Marker({
            map:map,
            position: [112.23561,33.038815],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //玉鼎广场
        var marker4 = new AMap.Marker({
            map:map,
            position: [112.232329,33.038772],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //电力广场中心
        var marker5 = new AMap.Marker({
            map:map,
            position: [112.237065,33.038792],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //文化广场
        var marker6 = new AMap.Marker({
            map:map,
            position: [112.235195,33.041423],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //府前街与步行街交叉口
        var marker7 = new AMap.Marker({
            map:map,
            position: [112.243775,33.039919],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        //镇坪县体育场
        var marker8 = new AMap.Marker({
            map:map,
            position: [112.219801,33.046966],
            icon: new AMap.Icon({
                size: new AMap.Size(30,30),  //图标大小
                image: "../images/weiIcon.png",
                imageSize: new AMap.Size(30,30)
            })
        });
        var markerlist = [marker1,marker2,marker3,marker4,marker5,marker6,marker7,marker8]
        map.add(markerlist)
        //鼠标点击marker弹出自定义的信息窗体
        marker1.on("click",function (e) {
            infoWindow.open(map, markerlist[0].getPosition());
        })
        marker2.on("click",function () {
            infoWindow1.open(map, markerlist[1].getPosition());
        })
        marker3.on("click",function () {
            infoWindow2.open(map, markerlist[2].getPosition());
        })
        marker4.on("click",function () {
            infoWindow3.open(map, markerlist[3].getPosition());
        })
        marker5.on("click",function () {
            infoWindow4.open(map, markerlist[4].getPosition());
        })
        marker6.on("click",function () {
            infoWindow5.open(map, markerlist[5].getPosition());
        })
        marker7.on("click",function () {
            infoWindow6.open(map, markerlist[6].getPosition());
        })
        marker8.on("click",function () {
            infoWindow7.open(map, markerlist[7].getPosition());
        })
    }

    //实例化信息窗体
    var title = '健康路与中山街交叉口</span>',
        content = [];
    content.push("<image src='../images/ping/first.jpg' style='width: 100px;height: 70px'>地址：健康路与中山街交叉口 <br> ");
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E5%B7%A5%E5%95%86.mp4'>详情</a>");
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '卫生路与涅阳路交叉口</span>',
        content = [];
    content.push("<image src='../images/ping/second.jpg' style='width: 100px;height: 70px'>地址：卫生路与涅阳路交叉口 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E8%BD%A6%E7%AB%99.mp4'>详情</a>");
    var infoWindow1 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '电力广场路口</span>',
        content = [];
    content.push("<image src='../images/ping/third.jpg' style='width: 100px;height: 70px'>地址：电力广场路口 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%94%B5%E8%A5%BF.mp4'>详情</a>");
    var infoWindow2 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '玉鼎广场</span>',
        content = [];
    content.push("<image src='../images/ping/five.jpg' style='width: 100px;height: 70px'>地址：玉鼎广场 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%8E%89%E9%BC%8E.mp4'>详情</a>");
    var infoWindow3 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '电力广场中心</span>',
        content = [];
    content.push("<image src='../images/ping/six.jpg' style='width: 100px;height: 70px'>地址：电力广场中心 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%94%B5%E4%B8%9C.mp4'>详情</a>");
    var infoWindow4 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '文化广场</span>',
        content = [];
    content.push("<image src='../images/ping/qi.jpg' style='width: 100px;height: 70px'>地址：文化广场 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E6%96%87%E5%8C%96%E5%B9%BF%E5%9C%BA.mp4'>详情</a>");
    var infoWindow5 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '府前街与步行街交叉口</span>',
        content = [];
    content.push("<image src='../images/ping/eight.jpg' style='width: 100px;height: 70px'>地址：府前街与步行街交叉口 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E9%82%AE%E5%B1%80.mp4'>详情</a>");
    var infoWindow6 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

    var title1 = '镇平县体育场</span>',
        content = [];
    content.push("<image src='../images/ping/last.jpg' style='width: 100px;height: 70px'>地址：镇平县体育场 <br> " );
    content.push("<a href='video.html?url=http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E4%BD%93%E8%82%B2%E5%9C%BA.mp4'>详情</a>");
    var infoWindow7 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title1, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });



    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "info";
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.paddingBottom= '0px auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    if (typeof map !== 'undefined') {
        map.on('complete', function() {
            if (location.href.indexOf('guide=1') !== -1) {
                map.setStatus({
                    scrollWheel: false
                });
                if (location.href.indexOf('litebar=0') === -1) {
                    map.plugin(["AMap.ToolBar"], function() {
                        var options = {
                            liteStyle: true
                        }
                        if (location.href.indexOf('litebar=1') !== -1) {
                            options.position = 'LT';
                            options.offset = new AMap.Pixel(10, 40);
                        } else if (location.href.indexOf('litebar=2') !== -1) {
                            options.position = 'RT';
                            options.offset = new AMap.Pixel(20, 40);
                        } else if (location.href.indexOf('litebar=3') !== -1) {
                            options.position = 'LB';
                        } else if (location.href.indexOf('litebar=4') !== -1) {
                            options.position = 'RB';
                        }
                        map.addControl(new AMap.ToolBar(options));
                    });
                }
            }
        });
    }
</script>